<template>
	<view class="han-select-container">
		<view class="han-select-title gui-color-gray" @click="handleClickTitle">
			<view class="title" :style="titleStyle">{{ title }}</view> <text class="gui-icons animate-original"
				:class="{'animate':open}">&#xe661;</text>
		</view>
		<view class="han-select-content"
			:style="{top:scrollTop+'px',height:(open?height:initHeight)+'px'}">
			<slot></slot>
		</view>
		<view class="han-select-mask fadeIn gui-animate" :style="{top: scrollTop +'px',height:maskHeight+'px'}"
			v-if="open" @click="handleClickMask"></view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '标题'
			},
			height: {
				type: Number,
				default: 300
			},
			titleStyle: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				open: false,
				scrollTop: 0,
				initHeight: 0,
				maskHeight: 0
			}
		},
		mounted() {
			let query = uni.createSelectorQuery().in(this)
			let self = this;
			query.select(`.han-select-container`).boundingClientRect((res) => {
				//console.log(res)
				self.scrollTop = res.top
			}).exec()

			query.select(`.han-select-title`).boundingClientRect((res) => {
				self.scrollTop = self.scrollTop + res.height + 5
			}).exec()
			// 获取屏幕高度
			uni.getSystemInfo({
				success: function(res) {
					self.maskHeight = res.windowHeight - self.scrollTop;
				}
			})
		},
		methods: {
			handleClickTitle() {
				this.open = !this.open;
				if (this.open) {
					this.$emit('open')
				} else {
					this.$emit('close')
				}
			},
			handleClickMask() {
				this.onClose();
			},
			onOpen() {
				this.open = true;
			},
			onClose() {
				this.open = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.han-select-container {}

	.han-select-title {
		position: relative;
		z-index: 11;
		width: auto;
		.title{
			padding-right:30rpx;
			max-width: 188rpx;
			overflow: hidden;
			height: 70rpx;
			line-height: 70rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.animate {
			position: absolute;
			transition: all 0.3s ease;
			transform: rotate(180deg);
			top: 20rpx;
			right: 0
		}
	}

	.animate-original {
		position: absolute;
		transition: all 0.3s ease;
		transform: rotate(0deg);
		top:22rpx;
		right: 0
	}

	.han-select-mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: #000;
		opacity: 0.5;
		top: 65rpx;
		left: 0;
		z-index: 9;
	}

	.han-select-content {
		position: fixed;
		z-index: 10;
		overflow: hidden;
		height: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		transition-property: height, border-bottom-width;
		transition-duration: 0.3s;
		overflow-y: auto;
	}
</style>